<template>
  <div class="mouse-box">
    <img id="move" src="../assets/images/b.gif" ref="images" />
  </div>
</template>

<script>
export default {
  mounted() {
    var move = this.$refs.images;
    window.onmousemove = function(e) {
      var event = e || window.event;

      var x = event.clientX + 10;
      var y = event.clientY + 20;
      if (
        x <= 10 ||
        y <= 10 ||
        x > document.body.clientWidth - move.offsetWidth
      ) {
        x = -300;
      }
      move.style.left = x + "px";
      move.style.top = y + "px";
    };
  },
};
</script>

<style lang="less" scoped>
#move {
  position: fixed;
  left: -300px;
  top: -300px;
}
.mouse-box {
  img {
    width: 60px;
    height: 60px;
  }
}
</style>
